<template>
  <div class="forum">
    <!-- 头部tab -->
    <div class="header-wrap">
      <span class="header-wrap-left"  @click="goback">
        <i class="iconback iconfont icon-fanhui"></i>
      </span>
      <span class="header-wrap-text">社区论坛</span>
      <span class="header-wrap-right">
        <i class="iconseach iconfont icon-sousuo"></i>
      </span>
    </div>
    <!-- 指南列表 -->
    <div class="forum-list" v-for='(list,index) in listData' :key="index" >
        <div class="forum-listBox">
            <div class="forum-img">
            <img :src="list.img" alt="">
            </div>
            <div class="forum-content">
            <span class="forum-title">{{list.name}}</span>
            <span class="forum-time">2018-05-25</span>
            <div class="forum-star">
              <span class="stars">
                <van-rate
                  style="width: auto;margin-right:.1rem;"
                  readonly
                  v-model="list.value"
                  :swipe-threshold = '3'
                  allow-half
                  void-icon="star"
                  void-color="#6b5da6"
                  color= '#ffa272' 
                  size= ".32rem"
                />
              <span class="star-number">({{list.number}})</span>
              </span>
              <span class="number">
              <span class="collection" @click="starnumber(index)" v-if="list.collectionShow"><img src="@/assets//images/collection-color.png" alt=""></span>
              <span class="collection" @click="starnumber(index)" v-else><img src="@/assets//images/collection.png" alt=""></span>
              </span>                
            </div>
            </div>
        </div>
    </div>
  </div>
</template>
<script>
import { Rate } from 'vant';
export default {
  data(){
    return{
       listData:[
         {
           id:0,
           collectionShow:true,
           name: '内容',
           value:2.5,
           number: '252',
           img:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2564906423,2162019872&fm=26&gp=0.jpg'
         },
         {
           id:1,
           collectionShow:true,
           name: '内容1',
           value:3,
           number: '22',
           img:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2564906423,2162019872&fm=26&gp=0.jpg'
         },
         {
           id:2,
           collectionShow:false,
           name: '内容2',
           value:2.5,
           number: '252',
           img:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2564906423,2162019872&fm=26&gp=0.jpg'
         },
         {
           id:3,
           collectionShow:false,
           name: '内容3',
           value:2.5,
           number: '252',
           img:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2564906423,2162019872&fm=26&gp=0.jpg'
         },
         {
           id:4,
           collectionShow:false,
           name: '电视指南',
           value:2.5,
           number: '252',
           img:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2564906423,2162019872&fm=26&gp=0.jpg'
         },
       ]
    }
  },
  methods:{
    goback(){
      this.$router.go(-1)
    },
    starnumber(index){
      this.listData[index].collectionShow = !this.listData[index].collectionShow
    },
  },
  components:{
    [Rate.name]: Rate
  }
}
</script>
<style scoped>
.forum{
  padding-top: 1rem;
}
.forum-list{
  background: #423B6F;
  margin: .25rem .3rem;
  border-radius: .2rem;
}
.forum-listBox{
  height: 2.4rem;
  display: flex;
  color: #fff;
}
.forum-img{
  flex:1;
}
.forum-img img{
  width: 100%;
  height: 100%;
  border-radius: .2rem 0 0 .2rem;
}
.forum-content{
  text-indent: .3rem;
  text-align: left;
  flex:2;
}
.forum-title{
  font-size: .32rem;
  height: 1.2rem;
  line-height: .85rem;
  display: block;
} 
.forum-time{
  display: block;
  color: #FD5585;
}
.forum-star{
  margin: .2rem 0 0 .3rem;
  display: flex;
}
.stars{
  position: relative;
  text-indent: 0;
  flex: 3.5;
  color: #6b5da6;
  display: inline-block;
}
.star-number{
  position: absolute;
  right: 0;
  top: 0.005rem;
  width:1rem;
}
.number{
  text-align: right;
  margin-right: .3rem;
  flex: 1;
}
.number span img{
  width: .35rem;
  height: .35rem;
}
</style>